<!-- 收款信息 -->
<template>
  <div class="business-info">
    <div class="p-title">收款信息</div>
    <div class="mt-12" :class="{ 'table-body-min-height': !collectionData.length }">
      <ProTable :columns="collectionColumns" :data="collectionData" :toolButton="false" :pagination="false"></ProTable>
    </div>

    <div class="p-title mt-12 mb-12">回款计划（非必填）</div>
    <div class="tabs-wrap">
      <el-tabs type="card" class="el-tabs-no-bottom" v-model="currentPlan">
        <el-tab-pane
          :label="item.name"
          :name="item.id"
          v-for="(item, index) in [
            { id: 1, name: '阶段' },
            { id: 2, name: '文本' }
          ]"
          :key="index"
          @change="currentPlan = item.id"
        >
        </el-tab-pane>
      </el-tabs>
      <div class="btn-position">
        <el-button v-if="currentPlan == 1">存为模板</el-button>
        <el-dropdown class="ml-12 mr-12">
          <el-button>
            引用模板<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item>Action 4</el-dropdown-item>
              <el-dropdown-item>Action 5</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-button v-if="currentPlan == 1" type="primary" @click="addRow">新增</el-button>
      </div>
    </div>

    <div class="mt-4"></div>
    <!-- 阶段 -->
    <div v-if="currentPlan == 1" :class="{ 'table-body-min-height': !paymentPlanData.length }">
      <ProTable ref="proTable" :columns="columns" :data="paymentPlanData" :toolButton="false" :pagination="false">
        <!-- Expand -->
        <template #expand="scope">
          {{ scope.row }}
        </template>

        <!-- 阶段名称 -->
        <template #name="scope">
          <el-input class="table-input" v-if="scope.row.isEdit" v-model="scope.row.name" placeholder="请输入阶段名称"></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
        <!-- 阶段内容 -->
        <template #content="scope">
          <el-input
            class="table-input"
            v-if="scope.row.isEdit"
            v-model="scope.row.content"
            placeholder="请输入阶段内容"
          ></el-input>
          <span v-else>{{ scope.row.content }}</span>
        </template>
        <!-- 是否需要打款 -->
        <template #needTransferMoney="scope">
          <el-switch v-if="scope.row.isEdit" v-model="scope.row.needTransferMoney" />
          <span v-else>{{ scope.row.needTransferMoney }}</span>
        </template>
        <!-- 打款金额 -->
        <template #transferAmount="scope">
          <el-input-number
            :controls="false"
            class="table-input"
            v-if="scope.row.isEdit"
            v-model="scope.row.transferAmount"
            placeholder="请输入打款金额"
          ></el-input-number>
          <span v-else>{{ scope.row.transferAmount }}</span>
        </template>
        <!-- 截止时间 -->
        <template #deadline="scope">
          <el-date-picker
            v-if="scope.row.isEdit"
            class="table-input"
            v-model="scope.row.deadline"
            type="date"
            placeholder="请选择截止时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
          <span v-else>{{ scope.row.deadline }}</span>
        </template>
        <!-- 可开票金额 -->
        <template #billableAmount="scope">
          <el-input-number
            :controls="false"
            class="table-input"
            v-if="scope.row.isEdit"
            v-model="scope.row.billableAmount"
            placeholder="请输入可开票金额"
          ></el-input-number>
          <span v-else>{{ scope.row.billableAmount }}</span>
        </template>

        <!-- 操作 -->
        <template #operation="scope">
          <el-button link type="primary" v-if="scope.row.isEdit">保存</el-button>
          <el-button link type="danger" class="operation-delete" @click="delRow(scope.$index)">删除</el-button>
        </template>
      </ProTable>
    </div>
    <!-- 文本 -->
    <div v-if="currentPlan == 2">
      <el-form
        ref="ruleFormRef"
        label-position="top"
        require-asterisk-position="right"
        :inline="true"
        class="form-inline-wrap remarks"
      >
        <el-form-item label="文本" class="w-100">
          <el-input
            class="text-textarea"
            v-model="remarks"
            type="textarea"
            :rows="5"
            placeholder="请输入文本"
            clearable
          ></el-input>
          <el-button class="save-template-btn">存为模板</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-form
      ref="ruleFormRef"
      label-position="top"
      require-asterisk-position="right"
      :inline="true"
      class="form-inline-wrap remarks"
    >
      <el-form-item label="备注" class="w-100">
        <el-input v-model="remarks" type="textarea" :rows="5" placeholder="请输入备注" clearable></el-input>
      </el-form-item>
    </el-form>

    <div class="p-title mb-12">审批流程</div>
    <el-steps class="approval-process" style="width: 660px" :active="1">
      <el-step title="{业务组长}" />
      <el-step title="{业务主管}" />
      <el-step title="{业务经理}" />
    </el-steps>
  </div>
</template>

<script lang="tsx" setup>
import { ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";

// 当前选择的回款计划类型
const currentPlan = ref(1);

// 收款信息表格栏
const collectionColumns = ref([
  {
    prop: "type",
    label: "类型",
    minWidth: 128
  },
  {
    prop: "total",
    label: "总金额(元)",
    minWidth: 265
  },
  {
    prop: "paid",
    label: "已付金额(元)",
    minWidth: 265,
    render: (scope: any) => {
      return <span class="text-green">{scope.row.paid}</span>;
    }
  },
  {
    prop: "unpaid",
    label: "未付金额(元)",
    minWidth: 265,
    render: (scope: any) => {
      return <span class="text-red">{scope.row.unpaid}</span>;
    }
  }
]);

// 收款信息数据
const collectionData = ref([
  {
    type: "现金",
    total: "10000",
    paid: "5000",
    unpaid: "5000"
  }
]);

// 回款计划
const columns = ref([
  {
    type: "index",
    label: "序号",
    width: 56
  },
  {
    prop: "name",
    label: "阶段名称",
    minWidth: 137
  },
  {
    prop: "content",
    label: "阶段内容",
    minWidth: 155
  },
  {
    prop: "needTransferMoney",
    label: "是否需要打款",
    minWidth: 109
  },
  {
    prop: "transferAmount",
    label: "打款金额(元)",
    minWidth: 107
  },
  {
    prop: "deadline",
    label: "截止时间",
    minWidth: 142
  },
  {
    prop: "billableAmount",
    label: "可开票金额(元)",
    minWidth: 107
  },
  {
    prop: "operation",
    label: "操作",
    minWidth: 100
  }
]);

// 回款计划
const paymentPlanData = ref([{}]);

// 新增一行
const addRow = () => {
  paymentPlanData.value.push({
    isEdit: true,
    name: "",
    content: "",
    needTransferMoney: "",
    transferAmount: "",
    deadline: "",
    billableAmount: ""
  });
};

// 删除一行
const delRow = (index: number) => {
  paymentPlanData.value.splice(index, 1);
};

// 备注
const remarks = ref("");
</script>

<style lang="scss" scoped>
.business-info {
  .mt-4 {
    padding-top: 4px;
  }
}
.card-content {
  border: 1px solid var(--el-border-color-light);
  margin-top: -16px;
  border-radius: 0 4px 4px 4px;
  padding: 14px;

  .service-item {
    margin-right: 10px;
    width: calc(33.33% - 10px);
    margin-bottom: 4px;
  }
}
.table-content {
  height: 160px;
}
.remarks {
  margin-top: 6px;
}

.text-textarea :deep(textarea) {
  padding-right: 90px;
}

.save-template-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 72px;
  text-align: center;
  height: 32px;
  line-height: 32px;
  color: var(--el-color-primary);
}

.tabs-wrap {
  position: relative;

  .btn-position {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
